<template>
	<div class="container">
		<div class="title">嘉泰JTAS智慧生产安全信息化平台</div>
		<div class="menu">
			<div class="item" v-for="item in menuList" :key="item.id" @click="jump(item)">
				<i class="icon" :class="item.icon"></i>
				<div class="name">{{ item.name }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			menuList: [
				{
					id: 1,
					name: '安全管理',
					icon: 'el-icon-menu',
				},
				{
					id: 2,
					name: '公用平台',
					icon: 'el-icon-menu',
				},
				{
					id: 3,
					name: '双重预防机制',
					icon: 'el-icon-menu',
				},
				{
					id: 4,
					name: '精益生产',
					icon: 'el-icon-menu',
				},
				{
					id: 5,
					name: '重大资源管理',
					icon: 'el-icon-menu',
				},
				{
					id: 6,
					name: '特殊作业',
					icon: 'el-icon-menu',
				},
				{
					id: 7,
					name: '环保工况',
					icon: 'el-icon-menu',
				},
				{
					id: 8,
					name: '新版教育培训',
					icon: 'el-icon-menu',
				},
				{
					id: 9,
					name: '智能视频分析',
					icon: 'el-icon-data-analysis',
				},
				{
					id: 10,
					name: '人员定位',
					icon: 'el-icon-menu',
				},
				{
					id: 11,
					name: '安全风险管控',
					icon: 'el-icon-menu',
				},
				{
					id: 12,
					name: '报警',
					icon: 'el-icon-menu',
				},
				{
					id: 13,
					name: '企业管理',
					icon: 'el-icon-menu',
				},
				{
					id: 14,
					name: '应急管理',
					icon: 'el-icon-menu',
				},
				{
					id: 15,
					name: '能源综合管理',
					icon: 'el-icon-menu',
				},
			],
		};
	},
	methods: {
		jump(data) {
			if (data.name == '智能视频分析') {
				this.$router.push('/basicInfo');
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background-image: url('../../assets/img/bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 50px;

	.title {
		font-size: 28px;
		font-weight: 700;
		color: #d4e2ed;
		text-align: center;
		height: 50px;
		line-height: 50px;
	}

	.menu {
		width: 1200px;
		height: 60vh;

		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translate(-50%, 0);

		.item {
			cursor: pointer;
			width: 215px;
			height: 150px;
			background-color: #82a9ea;
			opacity: 0.9;
			margin-bottom: 20px;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

            &:hover {
                background-color: #21a0ff;
            }

			.icon {
				width: 75px;
				height: 75px;
				margin-bottom: 10px;
				font-size: 75px;
				color: #e2f5f5;
			}

			.name {
				text-align: center;
				color: #cdf5ff;
				font-size: 16px;
				font-weight: 700;
			}
		}
	}
}
</style>
